<template>
  <div>
    <!--<button @click="isDark=!isDark">改变主题</button>-->
    <!--<div class="box" :class="{'dark': isDark}" id="box">-->
    <h3>参考：https://www.wangeditor.com/</h3>
    <div class="box" ref="box">
    <toolbar class="toolbar"
             :editor="editor"
             :defaultConfig="toolbarConfig"
             :mode="mode">
    </toolbar>
    <editor  class="editor"
             v-model="html"
             :defaultConfig="editorConfig"
             :mode="mode"
             @onCreated="onCreated"
             @onChange="onChange"
             @onDestroyed="onDestroyed"
             @onFocus="onFocus"
             @onBlur="onBlur"
    >
    </editor>
  </div>
    <button class="btn" @click="submit">提交</button>
  </div>
</template>

<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; // 加载编辑区和工具条
    import {IButtonMenu, IDomEditor, Boot } from '@wangeditor/editor'

    let box = null;
    //1.自定义菜单类
    class MyButtonMenu {
        constructor() {
            this.title = '主题变换' // 自定义菜单标题
            this.tag = 'button'
        }

        // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
        getValue(editor) {
            return  false;
        }

        // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
        isActive(editor) {
            return false
        }

        // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
        isDisabled(editor) {
            return false
        }

        // 点击菜单时触发的函数
        exec(editor, value) {
            if (this.isDisabled(editor)) return
            // editor.insertText("XY") // value 即 this.value(editor) 的返回值
            box.classList.toggle("dark");  /*动态添加class*/
        }
    }

    //2.注册菜单到wangEditor
    const menu1Conf = {
        key: 'menu-key1', // 定义 menu key ：要保证唯一、不重复（重要）
        factory() {
            return new MyButtonMenu();
        },
    }
    Boot.registerMenu(menu1Conf);

    export default {
        name: 'WangEditorView',
        components: { Editor, Toolbar },
        data() {
            return {
                isDark : false,
                editor: null,
                html: '<p>hello</p>',
                toolbarConfig: {
                    insertKeys : {
                        index: 0, // 插入的位置，基于当前的 toolbarKeys
                        keys: ['menu-key1']
                    }
                },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'default', // or 'simple'
            }
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() 【封闭对象：无法新增和删除属性】 ，否则会报错
            },
            onChange(editor) { /*console.log('onChange', editor.children)*/ },
            onDestroyed(editor) { /*console.log('onDestroyed', editor)*/ },
            onFocus(editor) { /*console.log('onFocus', editor)*/ },
            onBlur(editor) {/* console.log('onBlur', editor)*/ },
            submit(){
                const editor = this.editor;
                if(editor == null) return;
                console.log(editor.getHtml())
                console.log(editor.getText())
            }
        },
        mounted() {
            // 模拟 ajax 请求，异步渲染编辑器
            setTimeout(() => {
                this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
            }, 1500);
            box = this.$refs.box;
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    }
</script>

<style scoped>
  .box {
    border: 1px solid #ccc;
  }
  .toolbar {
    border-bottom: 1px solid #ccc
  }
  .editor {
    height: 300px;
    overflow-y: auto;
  }
</style>
<style>
  /* 暗色主题 */
  .box.dark {
    --w-e-textarea-bg-color: #363636;
    --w-e-textarea-color: #fff662;
    /* ...其他... */
  }
  .w-e-toolbar {
    /* 改为透明 */
    /*background-color: rgba(0, 0, 0, 0)!important;*/
    /* 改为红色 */
     background-color: #dcdcdc !important;
  }

  :root, :host {
    /*textarea - css vars*/
    --w-e-textarea-bg-color: #fff;
    --w-e-textarea-color: #333;
    --w-e-textarea-border-color: #ccc;
    --w-e-textarea-slight-border-color: #e8e8e8;
    --w-e-textarea-slight-color: #d4d4d4;
    --w-e-textarea-slight-bg-color: #f5f2f0;
    --w-e-textarea-selected-border-color: #B4D5FF;
    --w-e-textarea-handler-bg-color: #4290f7;

    /*toolbar - css vars*/
    --w-e-toolbar-color: #595959;
    --w-e-toolbar-bg-color: #fff;
    --w-e-toolbar-active-color: #333;
    --w-e-toolbar-active-bg-color: #f1f1f1;
    --w-e-toolbar-disabled-color: #999;
    --w-e-toolbar-border-color: #e8e8e8;

    /*modal - css vars*/
    --w-e-modal-button-bg-color: #fafafa;
    --w-e-modal-button-border-color: #d9d9d9;
  }
</style>
